<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: absolute;
            left: 0;
            top: 0;
        }


        p{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: absolute;
            left: 0;
            top: 350px;
        }
    </style>
</head>
<body>
    <div></div>


    <p></p>

    <script>
        // 下面这个版本有些问题
        // p标签 往下移动666 但是会先归0 
        // 因为我们设置了初始值为0
        function move(ele,type,target,times){
        
                // var init = 0; 改成获取元素 本身的type样式的值 
                // 样式的值在内联写的  
                // 获取元素内联的样式 
                let init = parseInt(window.getComputedStyle(ele)[type]);
                var timer = setInterval(function(){
                    init += 5;
                    ele.style[type] = init + 'px';
                    if(init >= target){
                        clearInterval(timer)
                    }

                },times);

        }

        var divele = document.querySelector('div');
        divele.onclick = function(){
            
            move(this,'left',496,10)
        }

        var pele = document.querySelector('p');
        pele.onmouseover = function(){
            move(this,'top',521,20)
        }

        //思考  目标 496  每次步长为5  到达不了目标  
        //如何能准确到达目标 ?
        // 每次步长为1 
        // // 匀速  每次走总路程十分之一  匀速
        // 降速 每次走剩余路程的十分之一  减速
    </script>
</body>
</html>